<template>
    <div>
        <div class="cats">
            <div class="cats-box">
                <div class="tab-box">
                    <div>
                        <div class="tab-nav">
                        <span class="tab-icon">
                            <i class="layui-icon icon-text">&#xe63f;</i>
                        </span>
                            <a href="javascript:;" class="nav-text">linkphp
                            </a>
                        </div>
                        <div class="tab-nav">
                        <span class="tab-icon">
                            <i class="layui-icon icon-text">&#xe63f;</i>
                        </span>
                            <a href="javascript:;" class="nav-text">linkphp
                            </a>
                        </div>
                        <div class="tab-nav">
                        <span class="tab-icon">
                            <i class="layui-icon icon-text">&#xe63f;</i>
                        </span>
                            <a href="javascript:;" class="nav-text">linkphp
                            </a>
                        </div>
                    </div>
                    <div class="forum-search">
                        <input type="text" class="search-text" placeholder="搜索你要的内容">
                        <div class="search-btn">
                            <i class="layui-icon search-icon">&#xe615;</i>
                        </div>
                    </div>
                </div>
                <!--<div class="cats-items">-->
                <!--<a href="javascript:;">Linux服务器</a>-->
                <!--</div>-->
            </div>
        </div>
        <!--<div class="cats-more" style="display: none"></div>-->
        <!--<div class="cats-tool">-->
        <!--<div class="cats-tool-icon">-->
            <!--<a href="javascript:;" class="-->
<!--tool">-->
                <!--<img src="/static/img/down.png" >-->
                <!--</a>-->
            <!--</div>-->
        <!--</div>-->

        <div class="content">
        <div class="forum-content-box">
            <div class="left-box">
                <div class="left-top">
                    <div class="left-top-left">
                        <span class="top-font">全部帖子</span>
                        </div>
                    <div class="left-top-right">
                        <a class="layui-btn" href="javascript:;" v-on:click="ask">
                            <i class="layui-icon">&#xe642;</i> 发表新帖</a>
                        </div>
                    </div>
                <div class="left-middle">
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">全部</li>
                            <li>推荐</li>
                            <li>热门</li>
                            <li>待解决</li>
                            <li>已解决</li>
                            </ul>
                        <div class="layui-tab-content"></div>
                        </div>
                    </div>

                <div class="left-content-box">
                    <!-- 循环遍历 -->
                    <div class="left-content" v-for="item in Items">
                    <div class="post-title">
                    <a href="javascript:;" v-on:click="ForumItem(item.id)">{{ item.title }}</a>
                    </div>
                    <div class="post-info">
                    <strong class="post-user">linkphp</strong>
                    <em class="post-time">{{ item.post_time }}</em>
                    <span class="post-tags"><a href="#" class="tags-info">mvc</a></span>
                    <span class="post-num"><i class="layui-icon">&#xe611;</i> 0</span>
                    </div>
                    </div>
                    </div>

                <!-- 底部分页 -->
                <div class="left-bottom">
                    <div id="page"></div>
                </div>
                </div>
            <!--<div class="right-box">-->
                <!--<div class="right-top">-->
                    <!--<div class="right-top-left">-->
                        <!--<span class="top-right-font">官方公告</span>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--<div class="right-content">-->
                    <!--&lt;!&ndash;<div class="post-notic">&ndash;&gt;-->
                    <!--&lt;!&ndash;<a href="#">这是一个测试的内容</a>&ndash;&gt;-->
                    <!--&lt;!&ndash;</div>&ndash;&gt;-->
                    <!--</div>-->
                <!--</div>-->
            </div>
        </div>
    </div>
</template>

<script>
import request from '../link/request.js'
export default {
  name: 'Forum',
  data () {
    return {
      Items: {}
    }
  },
  mounted () {
    this.getThisData()
  },
  methods: {
    getThisData () {
      let that = this
      layui.use('laypage', function () {
        let laypage = layui.laypage
        laypage.render({
          elem: 'page'
          ,count: 20
          ,curr: location.hash.replace('#!page=', '')
          ,hash: 'page'
          ,jump: function (obj, first) {
            request.get('/index.php/main/forum/getForumList/page/' + obj.curr)
              .then(function (response) {
                that.Items = response
              })
          }
        })
      })
    },
    toggle: function () {
    },
    ask () {
      this.router.push('ask')
    },
    ForumItem (id, res) {
      this.redirect('items/' + id)
    }
  }
}
</script>

<style scoped>
@import "../assets/css/forum.css";
</style>
